<script setup>
import {ref, onMounted, watch} from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})

let chart = null
const target = ref()

onMounted(() => {
    chart = echarts.init(target.value);
    renderChart()
})

watch(() => props.data, () => {
    renderChart()
})
const renderChart = () => {
    const xData = props.data.map((item) => ({
        name: item.name,
        max: 100
    }));
    const yData = props.data.map((item) => item.value);
    console.info(xData)
    console.info(yData)
    /** @type EChartsOption */
    const option = {
        title: {
            text: '雷达图',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 16
            }
        },
        radar: {
            name: {
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: 16
                }
            },
            shape: 'polygon',
            axisLine: {
                lineStyle: {
                    color: '#2f4865'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#54799e'
                }
            },
            indicator: xData,
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['#25467b', '#152647', '#1e80b8', '#155c84']
                }
            }
        },
        polar: {
            radius: '0%'
        },
        angleAxis: {
            min: 0,
            interval: 5,
            clockwise: false
        },
        radiusAxis: {
            min: 0,
            interval: 20,
            splitLine: {
                show: true
            }
        },
        series: [
            {
                type: 'radar',
                symbol: 'none',
                areaStyle: {
                    color: {
                        type: 'radial',     // 线性渐变
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0, color: '#025f8b' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#04a1e8' // 100% 处的颜色
                        }],
                    },
                    opacity: 1
                },
                lineStyle: {
                    width: 1,
                    color: '#04a1e8'
                },
                data: [
                    {
                        value: yData,
                        itemStyle: {
                            show: false
                        },
                    }
                ],
            }
        ]
    };
    chart.setOption(option);
}
</script>

<template>
    <div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>

<style scoped></style>
